<template>
    <!-- orderSub/pages/order/order.wxml -->
    <view :style="objColor">
        <!-- 订单列表 -->
        <view class="order-list">
            <view v-if="orderList.length">
                <view class="order-list-item" @tap="toDetail(item.id)" v-for="(item, index) in orderList" :key="index">
                    <view class="order-list-top">
                        <view class="siteName"  :data-index="item">{{ item.stationName ? item.stationName : '--' }}</view>
                        <view class="status flex-row-start" v-if="item.billStatus == 11">
							待支付
							<div class="arrows"></div>
                        </view>
						<view class="status1 flex-row-start" v-if="item.billStatus == 14">
							已支付
							<div class="arrows"></div>
						</view>
						<view class="status2 flex-row-start" v-if="item.billStatus == 18">
							已退款
							<div class="arrows"></div>
						</view>
                    </view>

                    <view class="order-list-center">
                        <view class="order-list-center-left">
                            <view>
                                <view class="period-time">
								  {{ item.pileName ? item.pileName : "--"
								    }}{{ item.gunName ? "-" + item.gunName : "" }}
                                </view>
								<view class="period-time2">
                                   超时占位时长：<text class="period-text">{{item.actualDuration}}分钟</text>
                                </view>
								<view class="period-time2 flex-row-start">
								   超时占位费用：
								<view class="degree">
                                    <text>￥</text>
                                    <text>{{ item.busBalance | regFenToYuan}}</text>
                                </view>
								</view>
								
                            </view>
                        </view>
                    </view>

                    <view class="order-list-bottom">
						<view class="operate-state2">详情</view>
                        <view class="operate-state" style="color:#6DB12E;border: 1rpx solid #6DB12E" v-if="item.billStatus == 11">立即支付</view>
                    </view>
                </view>
           </view>
			<view v-else>
                <upgrading text="暂无数据"></upgrading>
                <!-- <view class="chargingButton" @tap="goChargin">去充电</view> -->
            </view>
        </view>
		
    </view>
</template>

<script>

	var app = getApp();

	var util_1 = require('./../../../utils/util.js');

	var https_1 = require('./../../../api/https.js');
	import {
		getMyOccupyBillPage
	} from '../../../api/placeholder.js';
	var myData = new Date();
	export default {
		components: {
			
		},
		data() {
			return {
				orderList:[
					
				],
				config:{
					current:1,
					pageSize:10
				}
				
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
			this.getMyOccupyBillPage()
		},
		
		// 页面上拉触底事件的处理函数
		onReachBottom: function () {
			this.config.current++;
			this.getMyOccupyBillPage()
		},
		methods:{
			toDetail(id){
				uni.navigateTo({
					url:'../../pages/placeholderOrderDetail/placeholderOrderDetail?id='+id
				})
			},
			getMyOccupyBillPage(){
				getMyOccupyBillPage(this.config).then(res=>{
					let records = res.data.records || []
					if(records.length){
						this.orderList = [...this.orderList,...records]
					}
				})
			}
			
		}
	}
</script>
<style>
	page{
		background:#EBEDF1;
	}
</style>
<style lang="less" scoped>
	
    /* orderSub/pages/order/order.wxss */
    @import "../../../commin/commin.less";
	@import "../../../commin/flex.less";
	
	.arrows{
		.setArrows(#CCCFD5,14rpx,right,4rpx);
		margin-left: 6rpx;
	}
    .order-list{
		padding: 16rpx 0 48rpx 0;
        .order-list-item{
            .margins(0,24rpx,auto,24rpx);
            background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
            .borders(2rpx,@white-color);
            box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
            border-radius: 16rpx;
            margin-bottom: 16rpx;
            .paddings(39rpx,24rpx,33rpx,24rpx);
            .order-list-top{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .margins(auto,8rpx,0rpx,8rpx);
                //padding-bottom: 24rpx;
              //  border-bottom: 1rpx solid @text-color5;
                .siteName{
                    .fontsize(34rpx);
                    .kuan(430rpx);
                    .yiman(1);
                    font-family: PingFang SC;
                    font-weight: bold;
                    color:@text-color2;
                }
                .status{
                    .fontsize(28rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color:#FC724C;
                }
				.status1{
				    .fontsize(28rpx);
				    font-family: PingFang SC;
				    font-weight: 500;
				    color:#6DB12E;
				}
				.status2{
				    .fontsize(28rpx);
				    font-family: PingFang SC;
				    font-weight: 500;
				    color:#606266;
				}
            }
            .order-list-center{
                position: relative;
                .margins(auto,5rpx,auto,5rpx);
                .order-list-center-left{
                    display: flex;
                    justify-content: start;
                    align-items:center;
                    .order-img{
                        width: 160rpx;
                        height: 160rpx;
                        .margins(auto,30rpx,auto,9rpx);
                    }
                    .gun-number{
                        .fontsize(30rpx);
                        font-family: PingFang SC;
                        font-weight: bold;
                        color:@text-color2;
                    }
                    .degree{
                        .fontsize(34rpx);
                        font-family: DINAlternate;
                        font-weight: bold;
                        color:@orange;
                        text:nth-child(1){
                            .fontsize(24rpx);
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: #FF5A3A;
                        }
                        text:nth-child(2){
                            .fontsize(40rpx);
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #FF5A3A;
                        }
                    }
                    .period-time{
                        .fontsize(24rpx);
						color: #606266;
						margin-top: 26rpx
                    }
					.period-time2{
                        .fontsize(28rpx);
                        font-family: PingFang SC;
                        font-weight: 400;
                        color:#909399;
						margin-top: 26rpx;
						margin-bottom: 26rpx;
                    }
					.period-text{
						font-weight: 500;
						color: #303133;
					}
                }
                .charge-type{
                    .kuangao(77rpx,40rpx);
                    position:absolute;
                    top: 0rpx;
                    right:0rpx;
                }
            }
            .order-list-bottom{
                // display: flex;
                // justify-content: space-between;
                // align-items: center;
                .margins(0rpx,12rpx,auto,12rpx);
				text-align: right;
                .order-list-bottom-left{
                    .fontsize(24rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    .order-type{
                        .paddings(8rpx,19rpx,8rpx,19rpx);
                        color:@blue;
                        background: rgba(20, 135, 250, 0.06);
                        border-radius: 4rpx;
                    }
                    .account-type{
                        .paddings(8rpx,19rpx,8rpx,19rpx);
                        margin-left: 14rpx;
                        background: rgba(252, 114, 76, 0.06);
                        color:@orange;
                        border-radius: 4rpx;
                    }
                }
                .operate-state{
                    .kuangao(164rpx,64rpx);
                    line-height: 64rpx;
                    .textalign();
                    .borders(1rpx,@blue);
                    border-radius: 32rpx;
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color:@blue;
					display: inline-block;
					margin-left: 16rpx
                }
				.operate-state2{
                    .kuangao(164rpx,64rpx);
                    line-height: 64rpx;
                    .textalign();
                    .borders(1rpx,#606266);
                    border-radius: 32rpx;
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color:#606266;
					display: inline-block;
                }
            }
        }
    }
    
    .noList {
        text-align: center;
        font-size: 24rpx;
        color: #9699A6;
    }
    .chargingButton{
        text-align: center;
        position: relative;
        // top: -80rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: var(--textColor) ;
        margin-top: 40rpx;
    }
	.settlementImg{
        width: 25rpx;
        height: 25rpx;
        margin-right: 29rpx;
    }
	.settlementImg2{
        width: 13rpx;
        height: 25rpx;
        margin-left: 29rpx;
		vertical-align: middle;
    }
</style>
